export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bol: true, //bol为真的时候渲染，为假的时候不渲染 ，对应渲染render中{bol中元素}
      row: 0,
      list: [
        { id: 1, name: "张三", age: 10 },
        { id: 2, name: "李四", age: 20 },
        { id: 3, name: "王五", age: 30 },
        { id: 4, name: "赵六", age: 40 },
      ],
    };
  }

  render() {
    const { bol, list } = this.state;
    return (
      <div>
        <h2>学习渲染语法</h2>
        {/* //bol为真的时候渲染，为假的时候不渲染 对应this.state中bol的状态*/}
        {bol && <h2>海贼王路飞</h2>}
        {/* 切换功能，点击取反（切换bol的值），进行渲染；_ 代表变量 */}
        {/* <button onClick={() => this.setState((_) => ({ bol: !_.bol }))}> */}
        <button onClick={() => this.setState((state) => ({ bol: !state.bol }))}>
          隐藏王路飞
        </button>
        <hr />

        {bol ? <h2>海贼王路飞</h2> : <h2>海贼王的男人</h2>}
        <button onClick={() => this.setState((state) => ({ bol: !state.bol }))}>
          切换
        </button>
        <hr />
        {this.rowRender()}
        <button
          onClick={() => this.setState((_) => ({ row: (_.row + 1) % 4 }))}
        >
          切换
        </button>
        <hr />

        {/* 渲染列表数据list */}
        {list.map((ele, index) => (
          <div key={ele.id}>
            {ele.name}:{ele.age}{" "}
          </div>
        ))}
        <hr />

        {this.useListRender()}
        <hr />
        {this.useListRender2()}
        <hr />
        {this.gridRender(3)}
      </div>
    );
  }
  // 点击切换文字 点击第一次从第一行切换到第二行，每次行+1，循环跟行数4有关
  rowRender() {
    const { row } = this.state;
    let result = null;
    switch (row) {
      case 0:
        result = <h2>第1行文字</h2>;
        break;
      case 1:
        result = <h2>第2行文字</h2>;
        break;
      case 2:
        result = <h2>第3行文字</h2>;
        break;
      case 3:
        result = <h2>第4行文字</h2>;
        break;
      default:
    }
    return result;
  }

  // 勾选列表数据
  useListRender() {
    const { list } = this.state;
    return list.map((ele, index) => {
      return (
        <div key={ele.id}>
          <input type="checkbox" />
          <span>
            {ele.name}:{ele.age}
          </span>
        </div>
      );
    });
  }

  // 筛选出符号条件的列表数据
  useListRender2() {
    const { list } = this.state;
    let result = [];
    list.forEach((ele) => {
      if (ele.age > 20) {
        result.push(
          <div key={ele.id} data-id={ele.id}>
            {ele.name}:{ele.age}
          </div>
        );
      }
    });
    return (
      <div onClick={(ev) => console.log("--row", ev.target.dataset.id)}>
        {/* 点击打印row，需要用到绑定事件 ev.target.dataset.id*/}
        {result}
      </div>
    );
  }

  //画出单元格 num是形参，接收调用gridRender传的值
  gridRender(num) {
    const temp = Array(num).fill();
    return temp.map((_, i) => {
      return (
        <div key={i} style={{ height: "60px" }}>
          {temp.map((_, j) => {
            return <span key={j * 20 + i} style={styles.row}></span>;
          })}
        </div>
      );
    });
  }
}

// 单元格样式
const styles = {
  row: {
    display: "inline-block",
    width: "60px",
    height: "60px",
    border: "1px solid red",
  },
};
